<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo3</title>
</head>
<script src="Tools/jquery-2.0.0.min.js"></script>
<style>
    .descendants *{
        display: block;
        border: 2px solid lightgrey;
        color:lightgrey;
        padding: 5px;
        margin: 15px;
    }
    .siblings *
    { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }

</style>

<script>

    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").load("./text_demo.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success")
                alert("外部内容加载成功!");
            if(statusTxt=="error")
                alert("Error: "+xhr.status+": "+xhr.statusText);
        });
    });
    });


    // $(document).ready(function(){
    //     $("p").filter(".url").css("background-color","yellow");
    //     // $("div p").eq(1).css("background-color","yellow");
    //     // $("div p").last().css("background-color","yellow");
    //     // $("div p").css("background-color","yellow");
    //     // $("div p").first().css("background-color","yellow");
    // });


    // $(document).ready(function(){
    //     // $("h2").siblings().css({"color":"red","border":"2px solid red"})
    //     $("h2").nextAll().css({"color":"red","border":"2px solid red"})
    //    // $("div").find("span").css({"color":"red","border":"2px solid red"});
    // });

</script>

<body>

    <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
    <button>获取外部内容</button>


    <!-- <h1>欢迎访问我的主页</h1>
    <p>菜鸟教程 (index 0).</p>
    <p class="url">http://www.runoob.com (index 1)。</p>
    <p>google (index 2).</p>
    <p class="url">http://www.google.com (index 3)。</p> -->

    <!-- <h1>欢迎访问我的主页</h1>
    <div>
        <p>这是 div 中的一个段落。</p>
    </div>
    
    <div>
        <p>这是另外一个 div 中的一个段落。</p>
    </div>
    
    <p>这是一个段落。</p> -->

    <!-- <div>div (父元素)
        <p> p </p>
        <span> span</span>
        <h2>h2</h2>
        <h3>h3</h3>
        <p>p</p>
    </div> -->
    <!-- <div class="descendants" style="width:500px;">div (当前元素) 
        <p class="1">p (儿子元素)
            <span>span (孙子元素)</span>     
        </p>
        <p class="2">p (儿子元素)
            <span>span (孙子元素)</span>
        </p> 
    </div> -->
    
</body>
</html>


